<%@include file="common/head.jspf" %>

<div id="main" role="main">
    <div id="title-bar">
        <ul id="breadcrumbs">
            <li>
                <a href="dashboard.jsp" title="Home">
                    <span id="bc-home"></span>
                </a>
            </li>
            <li ><a href="grafico.jsp">Gr&aacute;ficos</a></li>
            <li class="no-hover">Plazos Respuestas ante Consultas</li>
        </ul>
    </div>
    <div class="shadow-bottom shadow-titlebar"></div>
    <div id="main-content">
        <div class="container_12">
            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Indicador Plazo de Respuesta ante Consulta</h1>
                        <span></span>
                    </div>
                    <div class="block-content">
                        <div id="containerChart" style="overflow: auto"></div>
                    </div>
                </div>
            </div>
            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Historico por Proceso</h1>
                        <span></span>
                    </div>
                    <div class="block-content">
                        <div id="containerChart2" style="overflow: auto"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="common/bottom.jspf" %>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>

<script type="text/javascript">
    var chart
    $(function () {

        chart  = new Highcharts.Chart({

            chart: {
                renderTo: 'containerChart',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: ''
            },

            pane: {
                startAngle: -90,
                endAngle: 90,
                background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 60,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: '<br/><br/><br/>Plazo en dias'
                },
                plotBands: [{
                        from: 0,
                        to: 10,
                        color:  '#55BF3B' // green
                    }, {
                        from: 10,
                        to: 40,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 40,
                        to: 60,
                        color: '#DF5353'// red
                    }]
            },

            series: [{
                    name: 'Numero de expedientes',
                    data: [43]
                }]

        });
    });

</script>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'containerChart2',
                    zoomType: 'xy'
                },
                title: {
                    text: 'Historico'
                },
                xAxis: {
                    categories: ['Mario Rodriguez', 'Grace Vargas', 'Randall Obando', 'Ana Cristina Ramirez', 'Federico Salazar'],
                    title: {
                        text: null
                    }
                },
                yAxis: [{ // Primary yAxis
                        labels: {
                           
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: 'Promedio de Plazo',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Cantidad de Consultas',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                          
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true
                    }],
                tooltip: {
                    formatter: function() {
                        return ''+
                            this.x +': '+ this.y +
                            (this.series.name.indexOf("#") !== -1 ? ' consultas' : 'dias');
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'horizontal',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 0,
                    y: 30,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                        name: '2012',
                        type: 'column',
                        data: [17, 31, 35, 20, 2]
                    }, {
                        name: '2011',
                        type: 'column',
                        data: [13, 15, 47, 40, 16]
                    }, {
                        name: '2010',
                        type: 'column',
                        data: [23, 14, 31, 32, 31]
                    }, {
                        type: 'spline',
                        name: '# 2012',
                        data: [13, 20, 34, 12,13],
                        yAxis: 1,
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3]
                        }
                    },{
                        type: 'spline',
                        name: '# 2011',
                        data: [23, 10, 4, 8,7],
                        yAxis: 1,
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3]
                        }
                    },{
                        type: 'spline',
                        name: '# 2010',
                        yAxis: 1,
                        data: [13, 10, 14, 11,14],
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3]
                        }
                    }]
            });
        });

    });
</script>
<script>
    var selected = "Ind";
    var subSelected = "Ind2";
</script>